<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>留言 | 陈一非的博客</title>
    <link rel="stylesheet" href="css/main.css">
    <link href="css/bootstrap.css" rel="stylesheet">
    <link rel="stylesheet" href="css/message.css">
</head>

<body>
    <div id="nav-placeholder"></div>

    <section class="hero-section">
        <div class="hero-text">
            <h2 style="color: #ffffff;">cyf的小窝</h2>
            <p>一个人几乎可以在任何他怀有无限热忱的事情上成功。</p>
        </div>
        <button id="scroll-down" class="scroll-down-arrow">
            <svg width="40" height="40" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M12 5V19M12 19L19 12M12 19L5 12" stroke="white" stroke-width="2" stroke-linecap="round"
                    stroke-linejoin="round" />
            </svg>
        </button>
    </section>


    <main class="container">
        <div style="text-align: center; background-color: rgba(128, 128, 128, 0.5); padding: 10px; border-radius: 8px;">
            <h2>留言板</h2>
        </div>

        <div class="content-container" style="display: flex; gap: 20px; padding: 20px;">
            <div id="sidebar-placeholder"></div>



            <div class="main-content"
                style="background-color: rgba(255, 255, 255, 0.8); border-radius: 12px; padding: 25px;">
                <!-- 留言列表 -->
                <div class="messages-list">
                    <h3>留言列表</h3>
                    <div id="messagesContainer"></div>
                </div>

                <!-- 留言表单 -->
                <div class="message-form-container">
                    <h3>添加留言</h3>
                    <form id="messageForm">
                        <div class="form-group">
                            <label for="nickname">昵称:</label>
                            <input type="text" id="nickname" class="form-control" placeholder="请输入您的昵称">
                        </div>
                        <div class="form-group">
                            <label for="email">邮箱:</label>
                            <input type="email" id="email" class="form-control" placeholder="请输入您的邮箱">
                        </div>
                        <div class="form-group">
                            <label for="content">留言内容:</label>
                            <textarea id="content" class="form-control" rows="4" placeholder="请输入您的留言内容"></textarea>
                        </div>
                        <button type="submit" class="btn btn-primary">提交留言</button>
                    </form>
                </div>

            </div>

            <div id="right-sidebar-placeholder"></div>
        </div>
    </main>

    <div id="footer-placeholder"></div>

    <script src="js/jquery-3.7.1.js"></script>
    <script src="js/bootstrap.js"></script>
    <script src="js/vue.min.js"></script>
    <script src="js/main.js"></script>
    <script src="js/message.js"></script>
    <script src="js/form-validator.js"></script>
</body>

</html>